$(function () {
    // 弹窗对象
    var layer = layui.layer;
    // 表单对象 
    var form = layui.form

    /**1-初始化文章分类 */
    initCate();

    function initCate() {
        // 获取文章分类信息
        $.ajax({
            type: 'get',
            url: '/my/article/cates',
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                // 把文章分类渲染到下拉表单中
                var htmlStr = template('tpl-cate', res)
                // console.log(htmlStr)
                // cate_id 是结构里的第二行 下拉选项
                $('[name=cate_id]').html(htmlStr)

                // 重新渲染表单 用这个是因为是动态生成的
                form.render()

            }
        })
    }

    /**2-初始化裁剪区域 */
    // 1.初始化图片裁剪器
    var $image = $('#image')
    // 2.裁剪选项
    var options = {
        aspectRatio: 400 / 280,
        preview: '.img-preview'
    }
     // 3.初始化裁剪区域
     $image.cropper(options)
    

    /**让用户选择新的图片文件 **************************************/
    // 弹出文件选择框
    $('#btnChooseImage').on('click', function () {
        $('#coverFile').click()
    })
    $('#coverFile').on('change', function () {
        var files = this.files;
        console.log(files)
        if (files.length <= 0) {
            return
        }
        var newImgURL = URL.createObjectURL(files[0])
        $image
            .cropper('destroy')
            .attr('src', newImgURL)
            .cropper(options)
    })
    /**4-准备文章的状态 **********************************************/
    var state = '已发布'
    // 当单击’存为草稿按钮时‘，置为草稿
    $('#btnSave2').on('click', function () {
        state = '草稿'
    })


    /**5-完成发布文章 ***************************************************/
    $('#form-pub').on('submit', function (e) {
        e.preventDefault();
        // 或这是$(this)[0]  将jq对象转为DOM对象
        // 收集表单数据
        var fd = new FormData(this)

        // 追加文章状态
        fd.append('state', state)

        // 打印一下表单的数据
        fd.forEach(function (item) {
            console.log(item)
        })
        // 裁剪图片--文件 追加到fd中    
        $image
            .cropper("getCroppedCanvas", {
                // 创建一个canvas画布
                width: 400,
                height: 280,
            })
            .toBlob(function (blob) {
                // 将canvas画布上的内容，转为文件对象
                // 得到文件对象后，进项后续操作
                // 5.将文件对象，存储到fd中
                fd.append('cover_img', blob);
                publishArticle(fd)

            })
    })
    /**封装一个函数，实现发布文章的功能 */
    function publishArticle(fd) {
        $.ajax({
            type: 'post',
            url: '/my/article/add',
            data: fd,
            contentType: false,
            processData: false,
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                layer.msg('添加文章成功', function () {
                    // 跳转到文章列表页
                    location.href = '/article/art_list.html'
                })
            }

        })
    }
})